<template>
  <div>
    <h1>v-model修饰符</h1>
    <!-- 
      v-model.修饰符 = '数据'
     -->
    <!-- 
      .number 转成数字类型 parseFloat
      如果我们表单元素填写的不是数字，而是abcd 
      转化后如果是能转数字的就显示数字
      转化后不能转数字的也不会显示NaN - 会显示对应填写的字符串
      这样对用户体验比较好 比如用户填写年龄 填了abcd 也不会看到NaN
     -->
    <input type="text" v-model.number="age" />
    <hr />
    <!-- .trim 去除首尾（注意是首尾空格去,中间不会去） 失去焦点后 会去首尾空格 -->
    <input type="text" v-model.trim="msg" />
    <hr />
    <!-- .lazy 在change事件触发(失去焦点或者回车) 而不是input事件 -->
    <input type="text" v-model.lazy="lazyText" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      msg: "hello world",
      lazyText: "lazy",
    };
  },
};
</script>

<style>
</style>